<script setup>
import { defineProps, onMounted, ref } from 'vue'
import { getbanner } from '@/api/goodAPI'
defineProps({
  goodlist: {
    type: Array
  }
})
const bannerlist = ref([])
onMounted(async () => {
  const res = await getbanner()
  bannerlist.value = res.data.result
})
</script>
<template>
  <div class="container banner">
    <ul class="left">
      <li v-for="ele in goodlist" :key="ele.id">
        <span>{{ ele.name }}</span>
        <span
          class="children"
          v-for="ele in ele.children.slice(0, 2)"
          :key="ele.id"
        >
          {{ ele.name }}
        </span>
        <div class="cover">
          <ul style="display: flex; flex-wrap: wrap; width: 100%">
            <li
              v-for="item in ele.goods"
              :key="item.id"
              style="
                height: 145px;
                margin: 10px;
                background-color: aliceblue;
                flex: 0 1 145px;
                padding: 0;
              "
            >
              <img
                :src="item.picture"
                alt=""
                style="width: 145px; height: 110px"
              />
              <p style="font-size: 13px; color: orangered; text-align: center">
                {{ item.name }}
              </p>
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <el-carousel
      height="500px"
      arrow="never"
      style="position: absolute; width: 100%; height: 100%; top: 0; z-index: 1"
    >
      <el-carousel-item v-for="ele in bannerlist" :key="ele.id">
        <img :src="ele.imgUrl" width="100%" height="100%" alt="" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<style lang="scss" scope>
.banner {
  height: 500px;
  .left {
    position: relative;
    display: block;
    z-index: 99;
    width: 20%;
    height: 100%;
    background-color: rgba(
      red($sucColor),
      green($sucColor),
      blue($sucColor),
      0.5
    );
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    li {
      font-size: 20px;
      padding-left: 15px;
      padding-top: 13px;
      //当鼠标悬浮时候
      flex: 1;
      &:hover {
        color: white;
        background-color: rgba(
          red($sucColor),
          green($sucColor),
          blue($sucColor),
          0.7
        );
      }
      span {
        margin-right: 10px;
      }
      .children {
        font-size: 14px;
      }
    }
  }
  li:hover .cover {
    display: block;
  }
  .cover {
    display: none;
    position: absolute;
    width: 500px;
    height: 500px;
    background-color: rgba(
      red($sucColor),
      green($sucColor),
      blue($sucColor),
      0.7
    );
    left: 100%;
    top: 0;
  }
}
</style>
